<script setup lang="ts">
import { useI18n } from 'vue-i18n';
definePageMeta({
    layout: 'default-custom',
    // name: 'home',
    title: 'activity',
    i18n: 'menu.activity',
});
const router = useRouter()
const route = useRoute()
const gameData = ref({
    gold: 0,
    name: '',
    webViewUrl: ''
})
onMounted(() => {

    if (window.history.state?.gameData) {
        console.log('gameData',window.history.state.gameData);
        gameData.value = JSON.parse(window.history.state.gameData)
    }
})
const visible = ref(true)

const closeWebView = () => {
    router.go(-1)
}
</script>

<template>
    <van-overlay :show="visible" class="webview-overlay" @click.self="closeWebView">
        <div class="webview-container">
            <!-- 顶部状态栏 -->
            <div class="webview-header rlative">

                <div class="flex items-center justify-between ">
                    <div class="bg-#394243  w-28 h-28 rounded-6 text-center leading-28">
                        <van-icon name="arrow-left" @click="closeWebView" :size="20" />
                    </div>
                </div>
                <span class="center-title color-#ffffff font-bold text-center">{{ gameData.name }}</span>
                <div class="bg-#2d3233  rounded-6 absolute right-15 flex items-center justify-between">
                    <img src="/imgs/gold_icon.png" alt="" class="w-20 ml-5">
                    <div class="px-5">{{ gameData.gold }}</div>
                    <!-- <div class="add bg-#454c4c px-5 ">
                        <van-icon name="plus" :size="15" />
                    </div> -->
                </div>
            </div>

            <!-- WebView内容区域 -->
            <iframe :src="gameData.webViewUrl" frameborder="0" class="webview-content" allowfullscreen></iframe>
        </div>
    </van-overlay>
</template>

<style lang="css" scoped>
.add {
    width: 55%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.center-title {
    position: absolute;
    top: 15px;
    right: 18px;
    transform: translateX(-50%);
}

.webview-overlay {
    display: flex;
    flex-direction: column;
    background-color: #000;
}

.webview-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.webview-header {
    width: 100%;
    height: 60px;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: white;
    font-size: 18px;
}

.webview-content {
    flex: 1;
    width: 100%;
    background-color: white;
}
</style>